<template>
	<view>
		<image :src="picurl" mode="aspectFill" @click="onGetImage"></image>
		
		<button @click="onGetCatImage">点击</button>
		<image :src="url" mode="aspectFill"  v-for="url in picCatUrl"></image>
		
		
		------------------------------------------
		
		
		<view class="out">
			<view class="row" v-for="item in listArr" :key="item.id" @click="clickItem(item.id)">
				<view class="title">{{item.id}}.{{item.title}}</view>
				<view class="content">{{item.body}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picurl:null,
				picCatUrl:[],
				listArr:[]
			}
		},
		onLoad() {
			this.onGetImage();
			this.getData();
		},
		methods: {
			onGetImage() {
				uni.showLoading({
					title:"数据加载中..."
				})
				uni.request({
					url:"https://dog.ceo/api/breeds/image/random",
					success: (res) => {
						console.log(res);
						this.picurl = res.data.message;
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			},
			onGetCatImage() {
				uni.showLoading({
					title:"数据加载中..."
				})
				uni.request({
					url:"https://www.dmoe.cc/random.php",
					data:{
						return: 'json'
					},
					success: (res) => {
						console.log(res);
						this.picCatUrl.push(res.data.imgurl);
					},
					complete: () => {
						uni.hideLoading();
					}
				})
				
			},
			getData() {
				uni.showLoading({
					title: "数据加载中..."
				})
				uni.request({
					url:"http://jsonplaceholder.typicode.com/posts",
					success: (res) => {
						console.log(res);
						this.listArr = res.data;
					},
					fail: (res) => {
						console.error(res);
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			clickItem(id) {
				console.log(id);
				uni.navigateTo({
					url:"/pages/detail/detail?id=" + id
				});
			}
		},
		
	}
</script>

<style>
.out {
	padding: 50rpx 30rpx;
	/* border: solid 1rpx red; */
	
}
.row {
	/* border: solid 1rpx green; */
	border-bottom: 1rpx dotted #e4e4e4;
}

.title {
	font-size: 24rpx;
	padding-bottom: 12rpx;
}

.content {
	font-size: 18rpx;
	padding-bottom: 8rpx;
	border-bottom: 1px dotted #14e4e4;
}
</style>
